<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片与透明玻璃效果</title>
    <link rel="stylesheet" href="styles.css">
    <script src="/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<style type="text/css">
    body,
    html {
        height: 100%;
        margin: 0;
    }

    .background {
        /* 设置背景图片 */
        background-image: url('/image/1.jpg');
        /* 替换为你的图片URL */
        background-size: cover;
        /* 确保图片覆盖整个元素 */
        background-position: center;
        /* 图片居中显示 */
        height: 100vh;
        /* 设置为视口高度 */
        display: flex;
        justify-content: center;
        /* 水平居中子元素 */
        align-items: center;
        /* 垂直居中子元素 */
    }

    .glassy-rectangle {
        width: 1200px;
        height: 700px;
        border-radius: 16px;
        /* 设置圆角 */
        background: rgba(255, 255, 255, 0.263);
        /* 半透明白色背景 */

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 可选，添加阴影增加立体感 */
        position: relative;
        /* 相对于其最近的定位祖先元素（在此例中为.background）进行定位 */
        z-index: 1;
        /* 确保它位于背景之上 */
        box-shadow: 9px, 9px, 42px, 0 rgba(0.47, 0.47, 0.47, 0.47)
    }

    /* 如果需要支持旧版浏览器，可以添加一个备选样式 */
    .glassy-rectangle.no-backdrop-filter {
        background: rgba(255, 255, 255, 0.5);
        /* 更不透明的背景作为备选 */
    }
</style>

<body>
    <div class="background">
        <div class="glassy-rectangle">
            <div class="mt-3 ms-3"><img src="/image/3.png"><strong style="margin-left: 800px;">个人中心/客服中心</strong></div>
            <div class="mt-5 row">
                <div class="col-1 mt-5">
                    <ul class="fs-1"><strong>客</strong></ul>
                    <ul class="fs-1"><strong>服</strong></ul>
                    <ul class="fs-1"><strong>中</strong></ul>
                    <ul class="fs-1"><strong>心</strong></ul>
                </div>
                <div class="col-10"><input  class="text" style="height: 400px; width: 1000px;"></div>
            </div>
            <div class="row">
                <div class="col-1"></div>
                <div class="col-10">
                    <div class="ms-4 mt-3 row">
                        <div class="col-6"><strong>姓名：</strong><input type="text" style="width: 300px;"></div>
                        <div class="col-6"><strong>联系电话：</strong><input type="number" style="width: 300px;"></div>
                    </div>
                    <div class="row">
                        <div class="col-8 ms-5 mt-4"><strong>客服电话：13044075232</strong></div>
                        <div class="ms-5 mt-4 col-2"><button class="rounded-2"
                            style="border-style: none; width: 100px;height: 40px; background-color:rgb(12, 139, 207); color:white;">提交反馈</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>